<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <meta http-equiv="Content-Type" content="text/html" /> -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>nums[i] - next(nums)[i]</title>
</head>
<style>
    :root {
        --LINE_HEIGHT: 1.4rem;
        --C_0: #555;
        --C_1: #dd9;
        --C_2: #aa2;
        --C_3: #9dd;
        --C_4: #2aa;
        --C_5: #d9d;
        --C_6: #a2a;
        --C_7: #f49;
        --C_8: #94f;
        --C_9: #ada;
        --C_A: #49f;
        --C_B: #f94;
        --C_C: #2d9;
        --C_D: #99f;
        --C_E: #f99;
        --C_F: #9f4;
    }

    body {
        font-family: Consolas, "Courier New", monospace;
        font-size: 24px;
        min-width: 1080px;
        background-color: #333;
        color: #fff;
    }

    header {
        width: 100%;

        p {
            margin-block-start: 1.2rem;
            margin-block-end: 1.2rem;
            text-align: center;
            font-size: 2rem;
            line-height: 2rem;
            font-weight: bolder;

            input {
                width: 36rem;
                font-size: 2rem;
                line-height: 2rem;
                text-align: center;
                border-radius: 0.4rem;
                letter-spacing: 0.4rem;
            }
        }
    }

    main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--LINE_HEIGHT);

        margin: 0 auto;
        min-height: var(--LINE_HEIGHT);
        width: 1080px;

        section {
            display: grid-row;
            width: 1fr;

            &#col1 {
                text-align: right;

            }

            &#col2 {
                text-align: left;

            }


            div {
                padding: 0 calc(var(--LINE_HEIGHT) / 2);

                &:nth-child(2n+1) {
                    background-color: #433;
                }

                &:nth-child(2n) {
                    background-color: #343;
                }


            }

            &#col2 {
                padding-top: calc(var(--LINE_HEIGHT) / 2);
            }

        }

        span {
            display: inline-block;
            color: transparent;
            width: calc(var(--LINE_HEIGHT)*0.64);
            line-height: var(--LINE_HEIGHT);

            &[v="0"] {
                &::before {
                    content: "0";
                    color: var(--C_0);
                }
            }

            &[v="1"] {
                &::before {
                    content: "1";
                    color: var(--C_1);
                }
            }

            &[v="2"] {
                &::before {
                    content: "2";
                    color: var(--C_2);
                }
            }

            &[v="3"] {
                &::before {
                    content: "3";
                    color: var(--C_3);
                }
            }

            &[v="4"] {
                &::before {
                    content: "4";
                    color: var(--C_4);
                }
            }

            &[v="5"] {
                &::before {
                    content: "5";
                    color: var(--C_5);
                }
            }

            &[v="6"] {
                &::before {
                    content: "6";
                    color: var(--C_6);
                }
            }

            &[v="7"] {
                &::before {
                    content: "7";
                    color: var(--C_7);
                }
            }

            &[v="8"] {
                &::before {
                    content: "8";
                    color: var(--C_8);
                }
            }

            &[v="9"] {
                &::before {
                    content: "9";
                    color: var(--C_9);
                }
            }

            &[v="A"] {
                &::before {
                    content: "A";
                    color: var(--C_A);
                }
            }

            &[v="B"] {
                &::before {
                    content: "B";
                    color: var(--C_B);
                }
            }

            &[v="C"] {
                &::before {
                    content: "C";
                    color: var(--C_C);
                }
            }

            &[v="D"] {
                &::before {
                    content: "D";
                    color: var(--C_D);
                }
            }

            &[v="E"] {
                &::before {
                    content: "E";
                    color: var(--C_E);
                }
            }

            &[v="F"] {
                &::before {
                    content: "F";
                    color: var(--C_F);
                }
            }
        }

    }
</style>

<body>
    <header>
        <p><input type="number" id="ipt" placeholder="Input Hex Number" /></p>
    </header>

    <main id="cols">
        <section id="col1"> </section>
        <section id="col2"> </section>
    </main>
</body>

<script type="module" src="./tpo2n.mjs"></script>

<script type="module">
    "use strict";
    import { nx } from "./tpo2n.mjs";

    const MAX_LEN = 16;
    const NUM_SCALE = 1 << 4;
    const L_P = 2 * MAX_LEN - 1;

    const col1 = document.getElementById("col1");
    const col2 = document.getElementById("col2");

    // local define
    const next = (nums) => {
        let num2 = [];
        for (let i = 0; i < nums.length - 1; i++) {
            num2.push(nx(nums[i], nums[i + 1]))
        }
        return [0, ...num2];
    }

    const toScaleUpper = (n) => n.toString(NUM_SCALE).toUpperCase();

    const SecondDiff = {
        itr: ["A","6","7","3","4","0","8","C"],
        nsA: [],
        nsB: [],
        records: [],
        init() {
            for (const i of this.itr) {
                this.records[i] = [];
                for (const j of this.itr) {
                    this.records[i][j] = new Set();
                }
            }
        },
        rec(ns) {
            if (this.nsA.length === 0) {
                this.nsA = [...ns];
                return;
            }

            this.nsB = [...ns];
            let t = 1;
            for (let i = 0; i < L_P - 1; i++) {
                if (t === 1 && this.nsA[i] === "0") continue;
                t = 0;
                this.records[this.nsA[i]][this.nsA[i + 1]].add(this.nsB[i + 1]);
            }

            this.nsA = [...this.nsB];
            this.nsB.length = 0;
        },
        dir() {
            let str = "    ";

            for (const i of this.itr) {
                str += `${i}   `;
            }


            str += "\n---------------------------------\n";

            for (const i of this.itr) {
                str += `${i}:  `;
                for (const j of this.itr) {
                    str += `${this.records[i][j].size}   `;
                }
                str += "\n";
            }

            return str;
        }
    };

    (() => { SecondDiff.init() })()

    document.getElementById("ipt").addEventListener("change", (evn) => {
        let nums = evn.target.value.toString().trim().split('');
        if (nums.length === 0 || nums.length > MAX_LEN) return alert("Out of Range");
        nums = nums.map(e => parseInt(e));
        if (nums.some(n => isNaN(n) || n < 0 || n > 5)) return alert("Error Input");

        col1.replaceChildren();
        col2.replaceChildren();

        let nsB, nsD, nsA = [0, ...Array.from({ length: 2 * MAX_LEN }, (_, i) => (i < nums.length ? nums[i] : 6))];

        while (nsA[L_P] === 6) {
            nsB = next(nsA);
            nsD = [];

            let div1 = document.createElement("div");
            let div2 = document.createElement("div");

            for (let i = 0; i < 2 * MAX_LEN; i++) {
                nsD[i] = toScaleUpper((nsA[i] + nsB[i] + NUM_SCALE) % NUM_SCALE);

                if (!SecondDiff.itr.includes(nsD[i])) alert("Found OverFlow!!! " + nsD[i]);

                let span1 = document.createElement("span");
                span1.setAttribute("v", nsA[i]);
                span1.textContent = nsA[i];
                div1.appendChild(span1);


                let span2 = document.createElement("span");
                span2.setAttribute("v", nsD[i]);
                span2.textContent = nsD[i];
                div2.appendChild(span2);
            }

            SecondDiff.rec(nsD);

            col1.appendChild(div1);
            col2.appendChild(div2);

            nsA = [...nsB];
        }

        console.log(SecondDiff.dir(), SecondDiff.records);

        /*
                A   6   7   3   4   0   8   C   
            ---------------------------------
            A:  2   1   3   2   1   0   1   0   
            6:  2   2   3   2   2   0   1   0   
            7:  2   3   4   4   3   2   1   1   
            3:  2   3   4   4   3   2   1   1   
            4:  0   2   2   3   2   2   0   1   
            0:  0   2   2   3   2   2   0   1   
            8:  0   0   0   0   0   0   0   1   
            C:  0   0   0   0   0   0   0   1
       */
    });
</script>